<template>
	<div class="login-main">
		<div class="mask"></div>
		<div class="loginCenter">
			<div class="logigTitle">叮咚电商后台管理</div>
			<div class="loginBox">
				<div class="loginBox-top">
					登录
				</div>
				<div class="loginBox-content">
					<el-form
						:model="ruleForm"
						status-icon
						:rules="rules"
						ref="ruleForm"
						label-width="100px"
						class="demo-ruleForm login-form"
					>
						<el-form-item label="用户名" prop="username">
							<el-input
								v-model.number="ruleForm.username"
								style="font-size:24px;"
							></el-input>
						</el-form-item>
						<el-form-item label="密码" prop="password">
							<el-input
								type="password"
								v-model="ruleForm.password"
								autocomplete="off"
								style="font-size:24px;"
							></el-input>
						</el-form-item>

						<el-form-item class="form-button">
							<el-button type="primary" @click="submitForm('ruleForm')"
								>登录</el-button
							>
							<el-button @click="resetForm('ruleForm')">重置</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	name: "login",
	data() {
		//rule 规则验证
		//value 将要进行验证的字符串
		//callback 验证成功 或 失败的毁掉函数
		const checkUserName = (rule, value, callback) => {
			console.log(rule, value);
			//将value去掉 左右空格
			const valueExc = value.trim();
			const reg = /^[a-zA-Z0-9]{4,16}$/;
			if (!reg.test(valueExc)) {
				callback(new Error("请输入4-16位的数字或大小写字母!"));
			} else {
				//验证通过
				callback();
			}
		};
		return {
			ruleForm: {
				username: "",
				password: "",
			},
			rules: {
				userName: [
					{
						required: true,
						validator: checkUserName,
						trigger: "blur",
						message: "请输入用户名",
					},
					{ min: 3, max: 16, message: "用户长度3-16位" },
				],
				password: [
					{
						required: true,
						trigger: "blur",
						message: "请输入密码",
					},
					{ min: 6, message: "密码不小于6" },
				],
			},
		};
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					console.log("可以调用登录接口");
					//希望调用vuex的actions来完成登录效果
					this.$store.dispatch("LoginAC", this.ruleForm).then((res) => {
						console.log(83, res);
						this.$message({
							message: "登录成功",
							type: "success",
						});
						if (res.status == 200) {
							this.$router.push("/home");
						}
					});
				} else {
					console.log("验证没有通过");
				}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
	},
};
</script>
<style lang="scss" scoped>
.login-main {
	width: 100%;
	height: 100%;
	position: absolute;
	.mask {
		width: 100%;
		height: 100%;
		filter: blur(4px);
		background-size: cover;
		position: absolute;
	}
	.loginCenter {
		width: 500px;
		height: 480px;
		font-size: 20px;
		position: relative;
		text-align: center;
		margin: 100px auto;
		.logigTitle {
			height: 100px;
			line-height: 100px;
			font-size: 36px;
			color: rgb(44, 43, 43);
			opacity: 0.8;
			font-weight: 700;
			text-align: center;
		}
		.loginBox {
			width: 100%;
			background: #fff;
			opacity: 0.99;
			box-shadow: 0px 0px 10px #0d15426b;
			border-radius: 5px;
			.loginBox-top {
				width: 100%;
				height: 80px;
				line-height: 80px;
				font-size: 24px;
				text-align: center;
				border-bottom: 1px solid #399ff3;
			}
			.loginBox-content {
				width: 100%;
				height: 220px;
				padding-top: 40px;
				.login-form {
					width: 90%;
					height: 200px;
				}
				.form-button {
					position: absolute;
					left: 0;
				}
			}
		}
	}
}
</style>
